<form nz-form [formGroup]="validateForm">
  <div nz-row [nzGutter]="24">
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>产品名</nz-form-label>
        <nz-form-control>
          <input nz-input placeholder="产品名" [formControlName]="'productName'"/>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="enable">责任人</nz-form-label>
        <nz-form-control [nzSm]="14" [nzXs]="24">
          <nz-select nzShowSearch   [formControlName]="'userId'">
            <nz-option nzValue="" nzLabel="请选择"></nz-option>
            <nz-option [nzValue]="user.userId" [nzLabel]="user.userName" *ngFor="let user of users"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6">
      <nz-form-item>
        <nz-form-label>是否可用</nz-form-label>
        <nz-form-control>
          <nz-select [formControlName]="'enable'">
            <nz-option nzValue="" nzLabel="请选择"></nz-option>
            <nz-option nzValue="1" nzLabel="是"></nz-option>
            <nz-option nzValue="2" nzLabel="否"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>
    <div nz-col [nzSpan]="6" class="search-area">
      <button nz-button (click)="search()">Search</button>
      <button nz-button (click)="resetForm()">Clear</button>
      <button nz-button [nzType]="'primary'" routerLink="./edit">Add</button>
    </div>
  </div>
</form>
<div class="table-div" >
  <nz-table #smallTable [nzData]="products" nzSize="small" [nzFrontPagination]="false" nzShowSizeChanger
            [nzShowTotal]="totalTemplate"
            [nzTotal]="total" [(nzPageIndex)]="current" [(nzPageSize)]="pageSize" [nzShowPagination]="true"
            [nzLoading]="loading" [nzLoadingDelay]="300"
            (nzPageIndexChange)="search()" (nzPageSizeChange)="search()" [nzPageSizeOptions]="pageSizes"
            nzShowQuickJumper [nzScroll]="{ y: 'calc(100vh - 310px)' }">
    <thead>
    <tr>
      <th>产品名</th>
      <th>是否可用</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of smallTable.data">
      <td>{{ data.productName }}</td>
      <td>{{ data.enable | enablePipe }}</td>
      <td>
        <button nz-button nzType="link" nzSize="small" routerLink="./edit" [queryParams]="{pid:data.pid}">
          <i nz-icon nzType="edit" nzTheme="outline"></i>edit
        </button>
      </td>
    </tr>
    </tbody>
  </nz-table>
  <ng-template #totalTemplate let-total> 一共 {{ total }} 条数据</ng-template>
</div>
